<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>testFloatAndClear</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/imgs/美女.jpg" />
    <style>
        div {
            background-color: #17a2b8;
            width: 100px;
            height: 100px;
            text-align: center;
            margin: 2px;
            opacity: 0.5;
        }
    </style>
<!--    <script src="/static/node_modules/jquery/dist/jquery.min.js"></script>-->
    <script src="../static/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div style="width: 200px;" onmouseover="f1(this)">1</div>
<div style="float:right;width: 150px;height: 50px;" onmouseover="f1(this)">2</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div style="float: left;" onmouseover="f1(this)">3</div>
<div onmouseover="f1(this)" style="width: 300px;height: 400px;background-color: #1c7430;clear: left;float: right" onclick="f2()">4</div>
<div onmouseover="f1(this)" style="width: 260px;height: 200px;background-color: #5fc470">5</div>
<div onmouseover="f1(this)" style="width: 200px;height: 200px;background-color: #9DC45F;float: left">6</div>
<div onmouseover="f1(this)" style="width: 250px;height: 300px;background-color: #7a6fdb">7</div>
<div onmouseover="f1(this)" style="float: left;">8</div>
<div onmouseover="f1(this)" style="float: left;">9</div>
<script>
    $(function () {

    });

    function f1(o) {
        console.log($(o).css('width'));
        if ($(o).css('width')!=='150px'){
            $(o).animate({
                opacity:'0.721',
                height:'150px',
                width:'150px',
                fontSize:'100px',
                borderRadius:'90px'
            },"toggle");
        }else {
            $(o).animate({
                opacity:'0.2',
                height:'200px',
                width:'200px',
                fontSize:'70px',
            },"toggle");
        }

    }

    function f2() {
        window.location.href="http://localhost:63342/picture-storage/templates/testFloatAndClear.html?_ijt=27muiev9qq8j7u3ccvf8vioq7g";
    }
</script>
</body>
</html>